<template>
  <div class="index">
    <div class="main-header">
      <div class="navigation">
        <!-- 导航 -->
        <div class="global-nav">
          <div class="nav-header">
            <div class="nav-header-container">
              <div class="brand">
                <router-link to="/">
                  <img
                    src="https://www.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/images/NVIDIA-Logo.svg"
                    width="110"
                    height="44"
                  />
                </router-link>
                <div
                  @click.stop="ShowHidden = !ShowHidden"
                  class="el-icon-arrow-down"
                >
                  &nbsp;
                </div>
              </div>
            </div>
          </div>
          <div v-if="ShowHidden" class="dropdown-overlay">
            <div class="container">
              <div class="left">
                <h2>平台</h2>
                <ul>
                  <li class="num1">
                    <a href="">
                      <img src="../assets/img/index/01_index.png" alt="" />
                    </a>
                    <div class="text">
                      <a href="">自主机器</a>
                    </div>
                  </li>
                  <li class="num1">
                    <a href="">
                      <img src="../assets/img/index/02_index.png" alt="" />
                    </a>
                    <div class="text">
                      <a href="">云与数据中心</a>
                    </div>
                  </li>
                  <li class="num1">
                    <a href="">
                      <img src="../assets/img/index/03_index.png" alt="" />
                    </a>
                    <div class="text">
                      <a href="">深度学习和人工智能</a>
                    </div>
                  </li>
                  <li class="num1">
                    <a href="">
                      <img src="../assets/img/index/04_index.png" alt="" />
                    </a>
                    <div class="text">
                      <a href="">设计和专业视觉化</a>
                    </div>
                  </li>
                  <li class="num1">
                    <a href="">
                      <img src="../assets/img/index/05_index.jpg" alt="" />
                    </a>
                    <div class="text">
                      <a href="">医疗</a>
                    </div>
                  </li>
                  <li class="num1">
                    <a href="">
                      <img src="../assets/img/index/06_index.jpg" alt="" />
                    </a>
                    <div class="text">
                      <a href="">高性能计算</a>
                    </div>
                  </li>
                  <li class="num1">
                    <a href="">
                      <img src="../assets/img/index/07_index.png" alt="" />
                    </a>
                    <div class="text">
                      <a href="">自动驾驶</a>
                    </div>
                  </li>
                  <li class="num1">
                    <a href="">
                      <img src="../assets/img/index/08_index.png" alt="" />
                    </a>
                    <div class="text">
                      <a href="">游戏和娱乐</a>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="divder">&nbsp;</div>
              <div class="right">
                <h2>其他链接</h2>
                <div class="link">
                  <ul>
                    <li>
                      <a href="">开发者</a>
                    </li>
                    <li>
                      <a href="">驱动程序</a>
                    </li>
                    <li>
                      <a href="">支持</a>
                    </li>
                    <li>
                      <a href="">关于NVIDIA</a>
                    </li>
                  </ul>
                  <ul>
                    <li>
                      <a href="">查看所有产品</a>
                    </li>
                    <li>
                      <a href="">GPU 技术大会</a>
                    </li>
                    <li>
                      <a href="">NVIDIA 博客</a>
                    </li>
                    <li>
                      <a href="">人才招聘</a>
                    </li>
                    <li>
                      <a href="">技术</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="sub-bar-nav">
            <div class="container">
              <ul id="nav">
                <li>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      下拉菜单<i
                        class="iconfont icon-tubiaoarrow-right-filling"
                      ></i>
                    </span>
                    <el-dropdown-menu
                      style="width: 180px; border-radius: 0px"
                      slot="dropdown"
                    >
                      <el-dropdown-item>黄金糕</el-dropdown-item>
                      <el-dropdown-item>狮子头</el-dropdown-item>
                      <el-dropdown-item>螺蛳粉</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
                <li>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      下拉菜单<i
                        class="iconfont icon-tubiaoarrow-right-filling"
                      ></i>
                    </span>
                    <el-dropdown-menu
                      style="width: 180px; border-radius: 0px"
                      slot="dropdown"
                    >
                      <el-dropdown-item>黄金糕</el-dropdown-item>
                      <el-dropdown-item>狮子头</el-dropdown-item>
                      <el-dropdown-item>螺蛳粉</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
                <li>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      下拉菜单<i
                        class="iconfont icon-tubiaoarrow-right-filling"
                      ></i>
                    </span>
                    <el-dropdown-menu
                      style="width: 180px; border-radius: 0px"
                      slot="dropdown"
                    >
                      <el-dropdown-item>黄金糕</el-dropdown-item>
                      <el-dropdown-item>狮子头</el-dropdown-item>
                      <el-dropdown-item>螺蛳粉</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
                <li>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      下拉菜单<i
                        class="iconfont icon-tubiaoarrow-right-filling"
                      ></i>
                    </span>
                    <el-dropdown-menu
                      style="width: 180px; border-radius: 0px"
                      slot="dropdown"
                    >
                      <el-dropdown-item>黄金糕</el-dropdown-item>
                      <el-dropdown-item>狮子头</el-dropdown-item>
                      <el-dropdown-item>螺蛳粉</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
                <li>
                  <el-dropdown>
                    <span class="el-dropdown-link"> 下拉菜单 </span>
                  </el-dropdown>
                </li>
                <li>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      下拉菜单<i
                        class="iconfont icon-tubiaoarrow-right-filling"
                      ></i>
                    </span>
                    <el-dropdown-menu
                      style="width: 180px; border-radius: 0px"
                      slot="dropdown"
                    >
                      <el-dropdown-item>黄金糕</el-dropdown-item>
                      <el-dropdown-item>狮子头</el-dropdown-item>
                      <el-dropdown-item>螺蛳粉</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="box">
          <div class="container">
            <div class="greenBar">
              <div class="greenBarTitle">
                <h2>驱动程序下载</h2>
              </div>
            </div>
            <div class="mainContent">
              <div class="breadCrumbs">
                <div class="title">NVIDIA</div>
                <div>&nbsp;>&nbsp;</div>
                <h1>驱动程序下载</h1>
              </div>
              <div class="foot-main">
                <div class="left">
                  <ul>
                    <li>
                      <img src="../assets/img/index/index01.jpg" alt="" />
                    </li>
                    <li>
                      <img src="../assets/img/index/index02.jpg" alt="" />
                    </li>
                    <li>
                      <img src="../assets/img/index/index03.jpg" alt="" />
                    </li>
                    <li>
                      <img src="../assets/img/index/index04.jpg" alt="" />
                    </li>
                  </ul>
                </div>
                <div class="right">
                  <div class="form">
                    <div class="pageTitle">NVIDIA 驱动程序下载</div>
                    <div class="table-top">
                      <div class="table1">
                        <div>
                          在下方的下拉列表中进行选择，针对您的 NVIDIA
                          产品确定合适的驱动。
                        </div>
                        <div>帮助&nbsp;&nbsp;</div>
                      </div>
                      <div class="table2">
                        <tbody>
                          <tr>
                            <td width="150">产品类型:</td>
                            <td width="200">
                              <el-select v-model="value" placeholder="请选择">
                                <el-option
                                  class="input"
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </td>
                            <td>
                              <span>&nbsp;</span>
                            </td>
                          </tr>
                          <tr>
                            <td width="150">产品系列:</td>
                            <td width="200">
                              <el-select v-model="value" placeholder="请选择">
                                <el-option
                                  class="input"
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </td>
                            <td>
                              <span>&nbsp;</span>
                            </td>
                          </tr>
                          <tr>
                            <td width="150">产品家族:</td>
                            <td width="200">
                              <el-select v-model="value" placeholder="请选择">
                                <el-option
                                  class="input"
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </td>
                            <td>
                              <span>&nbsp;</span>
                            </td>
                          </tr>
                          <tr>
                            <td width="150">操作系统:</td>
                            <td width="200">
                              <el-select v-model="value" placeholder="请选择">
                                <el-option
                                  class="input"
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </td>
                            <td>
                              <span>&nbsp;</span>
                            </td>
                          </tr>
                          <tr>
                            <td width="150">下载类型:</td>
                            <td width="200">
                              <el-select v-model="value" placeholder="请选择">
                                <el-option
                                  class="input"
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </td>
                            <td>
                              <span>&nbsp;</span>
                            </td>
                          </tr>
                          <tr>
                            <td width="150">语言:</td>
                            <td width="200">
                              <el-select v-model="value" placeholder="请选择">
                                <el-option
                                  class="input"
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </td>
                            <td>
                              <span>&nbsp;</span>
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <router-link to="/">
                                <el-button>搜索</el-button>
                              </router-link>
                            </td>
                          </tr>
                        </tbody>
                      </div>
                      <div class="table3">
                        <div class="hrline"></div>
                      </div>
                    </div>
                    <div class="table-bottom">
                      <div class="silverBar">其它的软件及驱动程序</div>
                      <p></p>
                      <div class="table-body">
                        <tr>
                          <td>
                            <p>
                              <strong>NVIDIA 虚拟 GPU 客户</strong>
                            </p>
                            <ul>
                              <li>
                                拥有当前 vGPU 软件许可的企业客户（GRID vPC、GRID
                                vApps 或 Quadro
                                vDWS）可通过点击以下链接，登录企业软件下载门户。如需有关如何访问您已购买许可的详细信息，请访问
                                <a href="">vGPU 软件下载页面</a>
                                <br />
                                <br />
                                <a href="">
                                  <img
                                    src="../assets/img/index/bttn-login.jpg"
                                    alt=""
                                  />
                                </a>
                                <p></p>
                                <p></p>
                              </li>
                            </ul>
                          </td>
                        </tr>
                      </div>
                      <div class="table-body">
                        <tr>
                          <td>
                            <p>
                              <strong>NVIDIA 虚拟 GPU 客户</strong>
                            </p>
                            <ul>
                              <li>
                                拥有当前 vGPU 软件许可的企业客户（GRID vPC、GRID
                                vApps 或 Quadro
                                vDWS）可通过点击以下链接，登录企业软件下载门户。如需有关如何访问您已购买许可的详细信息，请访问
                                <a href="">vGPU 软件下载页面</a>
                                <br />
                                <br />
                                <a href="">
                                  <img
                                    src="../assets/img/index/bttn-login.jpg"
                                    alt=""
                                  />
                                </a>
                                <p></p>
                                <p></p>
                              </li>
                            </ul>
                          </td>
                        </tr>
                      </div>
                      <br />
                      <p></p>
                      <div class="hrline"></div>
                      <br />
                      <p></p>
                      <div class="table-foot">
                        <tr>
                          <td class="td1">
                            <p>驱动程序</p>
                            <ul>
                              <li>试用版驱动程序</li>
                            </ul>
                          </td>
                          <td class="td2">
                            <p>驱动程序</p>
                            <ul>
                              <li>试用版驱动程序</li>
                            </ul>
                          </td>
                        </tr>
                      </div>
                      <p></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--  -->
    <!--  -->
    <!--  -->
    <!-- 脚 -->
    <footer-one></footer-one>
    <!-- src="https://www.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/images/NVIDIA-Logo.svg" -->
  </div>
</template>

<script>
import FooterOne from "@/components/FooterOne.vue";
export default {
  components: { FooterOne },
  data() {
    return {
      ShowHidden: false,
    };
  },
  mounted() {
    document.addEventListener("click", this.HiddenClick);
  },
  methods: {
    // 点击页面事件 隐藏需要隐藏的区域
    HiddenClick() {
      this.ShowHidden = false;
    },
  },
};
</script>

<style scoped src='../assets/css/index.css'></style>
<style lang="scss" scoped>
</style>